﻿@page "/tests/tables"
<Row>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Basic Example</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Basic table with lightly padded cells and horizontal dividers.</CardText>
            </CardBody>
            <CardBody>
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        @foreach ( var user in tableUsers )
                        {
                            <TableRow @key="@user.Id">
                                <TableRowHeader>@user.Id</TableRowHeader>
                                <TableRowCell>@user.FirstName</TableRowCell>
                                <TableRowCell>@user.LastName</TableRowCell>
                                <TableRowCell>@user.Social</TableRowCell>
                            </TableRow>
                        }
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Striped Rows</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>For alternating background colors on the rows, add <code>Striped</code> attribute.</CardText>
            </CardBody>
            <CardBody>
                <Table Striped="true">
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        @foreach ( var user in tableUsers )
                        {
                            <TableRow @key="@user.Id">
                                <TableRowHeader>@user.Id</TableRowHeader>
                                <TableRowCell>@user.FirstName</TableRowCell>
                                <TableRowCell>@user.LastName</TableRowCell>
                                <TableRowCell>@user.Social</TableRowCell>
                            </TableRow>
                        }
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Bordered Table</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>For borders all around the table, use <code>Bordered</code> attribute.</CardText>
            </CardBody>
            <CardBody>
                <Table Bordered="true">
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        @foreach ( var user in tableUsers )
                        {
                            <TableRow @key="@user.Id">
                                <TableRowHeader>@user.Id</TableRowHeader>
                                <TableRowCell>@user.FirstName</TableRowCell>
                                <TableRowCell>@user.LastName</TableRowCell>
                                <TableRowCell>@user.Social</TableRowCell>
                            </TableRow>
                        }
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Hoverable Rows</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>To achieve that "hover" effect when mousing over the table rows, use <code>Hoverable</code> attribute.</CardText>
            </CardBody>
            <CardBody>
                <Table Hoverable="true">
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        @foreach ( var user in tableUsers )
                        {
                            <TableRow @key="@user.Id">
                                <TableRowHeader>@user.Id</TableRowHeader>
                                <TableRowCell>@user.FirstName</TableRowCell>
                                <TableRowCell>@user.LastName</TableRowCell>
                                <TableRowCell>@user.Social</TableRowCell>
                            </TableRow>
                        }
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Borderless Table</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>For table without any borders set the <code>Borderless</code> attribute.</CardText>
            </CardBody>
            <CardBody>
                <Table Borderless="true">
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        @foreach ( var user in tableUsers )
                        {
                            <TableRow @key="@user.Id">
                                <TableRowHeader>@user.Id</TableRowHeader>
                                <TableRowCell>@user.FirstName</TableRowCell>
                                <TableRowCell>@user.LastName</TableRowCell>
                                <TableRowCell>@user.Social</TableRowCell>
                            </TableRow>
                        }
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Small Table</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Add <code>Narrow</code> to make tables more compact by cutting cell padding in half.</CardText>
            </CardBody>
            <CardBody>
                <Table Narrow="true">
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        @foreach ( var user in tableUsers )
                        {
                            <TableRow @key="@user.Id">
                                <TableRowHeader>@user.Id</TableRowHeader>
                                <TableRowCell>@user.FirstName</TableRowCell>
                                <TableRowCell>@user.LastName</TableRowCell>
                                <TableRowCell>@user.Social</TableRowCell>
                            </TableRow>
                        }
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Light Header</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Use the <code>Theme</code> attribute to make header appear light or dark gray.</CardText>
            </CardBody>
            <CardBody>
                <Table>
                    <TableHeader ThemeContrast="ThemeContrast.Light">
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        @foreach ( var user in tableUsers )
                        {
                            <TableRow @key="@user.Id">
                                <TableRowHeader>@user.Id</TableRowHeader>
                                <TableRowCell>@user.FirstName</TableRowCell>
                                <TableRowCell>@user.LastName</TableRowCell>
                                <TableRowCell>@user.Social</TableRowCell>
                            </TableRow>
                        }
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Dark Header</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Use the <code>Theme</code> attribute to make header appear light or dark gray.</CardText>
            </CardBody>
            <CardBody>
                <Table>
                    <TableHeader ThemeContrast="ThemeContrast.Dark">
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        @foreach ( var user in tableUsers )
                        {
                            <TableRow @key="@user.Id">
                                <TableRowHeader>@user.Id</TableRowHeader>
                                <TableRowCell>@user.FirstName</TableRowCell>
                                <TableRowCell>@user.LastName</TableRowCell>
                                <TableRowCell>@user.Social</TableRowCell>
                            </TableRow>
                        }
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Contextual Colors</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Use <code>Color</code> on table rows or individual cells.</CardText>
            </CardBody>
            <CardBody>
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow Color="Color.Primary">
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Color="Color.Success">
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>4</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Color="Color.Info">
                            <TableRowHeader>5</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>6</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Color="Color.Warning">
                            <TableRowHeader>7</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>8</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Color="Color.Danger">
                            <TableRowHeader>9</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Contextual With Background Color</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Use <code>Background</code> and <code>TextColor</code> on table rows or individual cells.</CardText>
            </CardBody>
            <CardBody>
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow Background="Background.Dark" TextColor="TextColor.White">
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Background="Background.Success" TextColor="TextColor.White">
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>4</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Background="Background.Info" TextColor="TextColor.White">
                            <TableRowHeader>5</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>6</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Background="Background.Warning" TextColor="TextColor.White">
                            <TableRowHeader>7</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>8</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Background="Background.Danger" TextColor="TextColor.White">
                            <TableRowHeader>9</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Responsive</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Use <code>Responsive</code> for horizontally scrolling tables.</CardText>
            </CardBody>
            <CardBody>
                <Table Responsive="true">
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        @for ( int i = 1; i <= 3; ++i )
                        {
                            var index = i.ToString();

                            <TableRow @key="@index">
                                <TableRowHeader>@index</TableRowHeader>
                                <TableRowCell>Column content</TableRowCell>
                                <TableRowCell>Column content</TableRowCell>
                                <TableRowCell>Column content</TableRowCell>
                                <TableRowCell>Column content</TableRowCell>
                                <TableRowCell>Column content</TableRowCell>
                                <TableRowCell>Column content</TableRowCell>
                                <TableRowCell>Column content</TableRowCell>
                                <TableRowCell>Column content</TableRowCell>
                                <TableRowCell>Column content</TableRowCell>
                                <TableRowCell>Column content</TableRowCell>
                                <TableRowCell>Column content</TableRowCell>
                                <TableRowCell>Column content</TableRowCell>
                                <TableRowCell>Column content</TableRowCell>
                                <TableRowCell>Column content</TableRowCell>
                                <TableRowCell>Column content</TableRowCell>
                            </TableRow>
                        }
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
</Row>

<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Dynamic Settings</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Select different settings to see the result.</CardText>
            </CardBody>
            <CardBody>
                <Row>
                    <Column>
                        <Switch @bind-Checked="@fixedHeader">Fixed header</Switch>
                        @if ( fixedHeader )
                        {
                            <Addons>
                                <Addon AddonType="AddonType.Body">
                                    <NumericEdit Size="Size.Small" TValue="int" @bind-Value="scrollToValue" />
                                </Addon>
                                <Addon AddonType="AddonType.End">
                                    <Button Size="Size.Small" Color="Color.Primary" Clicked="@ScrollToRow"> Scroll To Row </Button>
                                </Addon>
                            </Addons>
                        }
                    </Column>
                    <Column><Switch @bind-Checked="@stripped">Stripped</Switch></Column>
                    <Column><Switch @bind-Checked="@bordered">Bordered</Switch></Column>
                    <Column><Switch @bind-Checked="@borderless">Borderless</Switch></Column>
                    <Column><Switch @bind-Checked="@hoverable">Hoverable</Switch></Column>
                    <Column><Switch @bind-Checked="@small">Narrow rows</Switch></Column>
                    <Column>
                        <Switch @bind-Checked="@resizable">Resizable</Switch>
                        @if ( resizable )
                        {
                            <Select Size="Size.Small" @bind-SelectedValue="@resizeMode">
                                <SelectItem Value="TableResizeMode.Header">Header</SelectItem>
                                <SelectItem Value="TableResizeMode.Columns">Columns</SelectItem>
                            </Select>
                        }
                    </Column>
                </Row>
            </CardBody>
            <CardBody>
                <Table @ref="@tableRef" FixedHeader="@fixedHeader" Striped="@stripped" Bordered="@bordered" Borderless="@borderless" Hoverable="@hoverable" Narrow="@small" Resizable="@resizable" ResizeMode="@resizeMode" FixedHeaderTableHeight="300px">
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                        </TableRow>
                        <TableRow>
                            <TableHeaderCell>#2</TableHeaderCell>
                            <TableHeaderCell>Column heading2</TableHeaderCell>
                            <TableHeaderCell>Column heading2</TableHeaderCell>
                            <TableHeaderCell>Column heading2</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        @for ( int i = 1; i <= 10; ++i )
                        {
                            var index = i.ToString();

                            <TableRow @key="@index">
                                <TableRowHeader>@index</TableRowHeader>
                                <TableRowCell>Column content</TableRowCell>
                                <TableRowCell>Column content</TableRowCell>
                                <TableRowCell>Column content</TableRowCell>
                            </TableRow>
                        }
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
</Row>